<template>
  <div>
    <el-page-header @back="goBack" title="返回">
      <template #content>
        <span class="text-large font-600 mr-3"> 修改资料 </span>
      </template>
    </el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-form-item label="头像" prop="nickname">
        <el-tooltip class="item" effect="dark" content="点击切换头像" placement="top">
        <el-upload
          class="avatar-uploader"
          name="img"
          action="/api/image"
          :headers="{ 'Authorization': 'Bearer ' + Token }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-tooltip>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { changeUserinfo, getinfo } from '@/api/user'

export default {
  data () {
    return {
      ruleForm: {
        nickname: '',
        phone: '',
        email: '',
        avatar: ''
      },
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ],
        email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }]
      }
    }
  },
  computed: {
    Token () {
      return getToken()
    },
    ...mapGetters(['getUserinfo'])
  },
  created () {
    this.ruleForm = this.getUserinfo
  },
  methods: {
    async getNewUserinfo () {
      try {
        const { data } = await getinfo()
        this.$store.commit('changeUserinfo', data.data)
        // 跳转回到
        this.goBack()
      } catch (error) {
        return console.log(error)
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const { data } = await changeUserinfo(this.ruleForm)
            console.log(data.message)
            if (data.success) {
              console.log(1)
              this.$message({ type: 'success', message: data.message })
              // 更新用户信息
              this.getNewUserinfo()
            } else {
              console.log(0)
              this.$message({ type: 'error', message: data.message })
            }
          } catch (error) {
            return console.log(error)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    handleAvatarSuccess (res, file) {
      if (res.success) {
        this.ruleForm.avatar = res.data.img
        this.$message({
          type: 'success',
          message: '头像上传成功'
        })
      } else {
        this.$message({
          type: 'error',
          message: '头像上传失败'
        })
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    goBack () {
      this.$router.push('/system')
    }
  }
}
</script>
<style scoped>
.el-page-header {
  margin-bottom: 40px;
  margin-top: -10px;
}
.avatar-uploader {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
.avatar-uploader .avatar {
  width: 100%;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>
